<template>
  <el-form
    :model="innerQueryParams"
    ref="queryRef"
    :inline="true"
    v-show="showSearch"
    label-width="88px"
  >
    <el-form-item label="搜索学员" prop="name">
      <el-input
        v-model="innerQueryParams.name"
        placeholder="请输入学员姓名或手机号"
        clearable
        style="width: 240px"
        @keyup.enter="getInnerList"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" icon="Search" @click="getInnerList"
        >搜索</el-button
      >
      <el-button icon="Refresh" @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table
    class="makeup"
    v-loading="loading"
    :data="innerList"
    :row-key="(row) => row.id"
    ref="innerTable"
    border
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      type="selection"
      reserve-selection
      width="55"
      align="center"
      :selectable="selectable"
    />
    <el-table-column
      label="学员姓名"
      align="center"
      prop="studentName"
      fixed="left"
    />
    <el-table-column
      label="班级名称"
      align="center"
      prop="className"
      width="160"
      fixed="left"
    />
    <el-table-column
      label="授课课程"
      align="center"
      prop="courseNameC"
      width="160"
    />
    <el-table-column
      label="消耗方式"
      align="center"
      prop="courseName"
      width="160"
    />
    <el-table-column label="剩余课时" align="center" prop="num" width="160">
      <template #default="scope">{{ scope.row.num + "课时" }}</template>
    </el-table-column>
    <el-table-column
      label="上课时间"
      align="center"
      prop="classDate"
      width="240"
    >
      <template #default="scope">
        {{
          scope.row.weekNum
            ? scope.row.classDate.slice(0, 10) +
              "(周" +
              {
                1: "一",
                2: "二",
                3: "三",
                4: "四",
                5: "五",
                6: "六",
                7: "日",
              }[scope.row.weekNum] +
              ")" +
              "  " +
              scope.row.classStartTime +
              "~" +
              scope.row.classEndTime
            : scope.row.classDate.slice(0, 10) +
              "  " +
              scope.row.classStartTime +
              "~" +
              scope.row.classEndTime
        }}
      </template>
    </el-table-column>
    <el-table-column label="主班老师" align="center" prop="teacherName" />
    <el-table-column
      label="助教老师"
      align="center"
      prop="assistantName"
      width="160"
    />
    <el-table-column label="缺课状态" align="center" prop="state" />
    <el-table-column label="应扣/实扣课时" align="center" prop="classHour">
      <template #default="scope">{{
        scope.row.classHour + "/" + scope.row.classHourPay
      }}</template>
    </el-table-column>
    <el-table-column
      label="上课内容"
      align="center"
      prop="description"
      width="240"
    />
  </el-table>

  <pagination
    v-show="total > 0"
    :total="total"
    v-model:page="innerQueryParams.pageNum"
    v-model:limit="innerQueryParams.pageSize"
    @pagination="getInnerList"
    size="small"
  />
</template>

<script setup>
import { getMissedListAPI } from "@/api/registrar/class";

const props = defineProps({
  data: {
    type: Object,
    default: () => {
      return {
        courseId: null,
        orderNo: null,
      };
    },
  },
});
// 变量--------------------------------------------------------------------------------------------------------------------
const { proxy } = getCurrentInstance();
const emits = defineEmits(["setItemsValues"]);

const loading = ref(false);
const innerTable = ref(null);
const innerList = ref([]);
const showSearch = ref(true);
const total = ref(0);
const items = ref([]);

const data = reactive({
  innerQueryParams: {
    pageNum: 1,
    pageSize: 10,
    name: "",
    mobile: "",
  },
});

const { innerQueryParams } = toRefs(data);

function initPage() {
  resetInnerData();
  if (props.data.courseId) getInnerList();
  // else {
  //   innerList.value = [];
  //   total.value = 0;
  // }
}

function selectable(row) {
  const selectedSIds = items.value.map((obj) => obj.studentId); //被选中的studentId数组
  const selectedIds = items.value.map((obj) => obj.id); //被选中的id数组
  return !selectedSIds.includes(row.studentId) || selectedIds.includes(row.id);
}

function handleSelectionChange(selection) {
  items.value = selection;
  emits("setItemsValues", items.value);
}

function resetInnerData() {
  innerQueryParams.value = {
    pageNum: 1,
    pageSize: 10,
    name: "",
    mobile: "",
  };
  innerTable.value && innerTable.value.clearSelection();
  innerList.value = [];
  total.value = 0;
}

function resetQuery() {
  resetInnerData();
  getInnerList();
}

function getInnerList() {
  loading.value = true;
  innerList.value = [];
  getMissedListAPI({
    ...innerQueryParams.value,
    listType: "3",
    courseId: props.data.courseId,
    orderNo: props.data.orderNo,
  }).then((response) => {
    innerList.value = response.rows;
    loading.value = false;
    total.value = response.total;
  });
}

defineExpose({ initPage }); // 用于父组件调用
</script>

<style lang="scss" scoped>
:deep .el-table__header-wrapper .el-checkbox {
  display: none;
}
</style>
